const path = require('path')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production'

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  devServer: {
    open: false, // 编译后自动打开
    inline: true, // 保存代码刷新页面
    host: 'localhost', // 自己的ipv4地址
    port: 4000, // 端口
    https: false, // 启用https
    proxy: { // 配置跨域
      '/api': {
        target: 'http://zjut.ahapocket.cn:8080/api/',
        changOrigin: true, // 允许跨域
        pathRewrite: {
          '^/api': ''
        }
      },
    }
  },
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: '', // 打包的静态文件目录
  filenameHashing: true, // 使用hash命名
  productionSourceMap: false, // 不需要生产环境的 source map
  lintOnSave: 'warning', // eslint警告会在编译输出
  configureWebpack: (config) => { // 打包忽略文件
    const plugins = []

    if (isProduction) {
      /* 去除注释 */
      plugins.push(new UglifyJsPlugin({
        uglifyOptions: {
          output: {
            comments: false, // 去掉注释
          },
          warnings: false,
          compress: {
            drop_console: true,
            drop_debugger: false,
            pure_funcs: ['console.log']// 移除console
          }
        }
      }))
      /* gzip压缩 */
      plugins.push(new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: /\.(js|css)$/, // 匹配文件名
        threshold: 100000, // 对超过100k的数据压缩
        deleteOriginalAssets: false, // 不删除源文件
        minRatio: 0.8 // 压缩比
      }))
      /* 取消webpack警告的性能提示 */
      config.performance = {
        hints: 'warning',
        // 入口起点的最大体积
        maxEntrypointSize: 1000 * 500,
        // 生成文件的最大体积
        maxAssetSize: 1000 * 1000,
        // 只给出 js 文件的性能提示
        assetFilter: function(assetFilename) {
          return assetFilename.endsWith('.js')
        }
      }
      /* js分离 */
      config.optimization = {
        runtimeChunk: 'single',
        splitChunks: {
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 1000 * 60,
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name(module) {
                // 排除node_modules 然后吧 @ 替换为空 ,考虑到服务器的兼容
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[ 1 ]

                return `npm.${ packageName.replace('@', '') }`
              }
            }
          }
        }
      }
    }
    /* cdn不打包 */
    config.externals = {
      'Vue': 'Vue',
      'VueRouter': 'VueRouter',
      'Vuex': 'Vuex',
      'axios': 'axios',
      'moment': 'moment',
      'vant': 'vant',
    }
    return { plugins }
  },
  chainWebpack: (config) => {
    /* 别名配置，set第一个参数：设置的别名，第二个参数：设置的路径 */
    config.resolve.alias
      .set('@', resolve('src'))

    if (isProduction) {
      /* webpack 会默认给commonChunk打进chunk-vendors，所以需要对webpack的配置进行delete */
      config.optimization.delete('splitChunks')

      /* 压缩图片 */
      config.module
        .rule('images')
        .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({ bypassOnDebug: true })

      /* 打包分析 */
      // config
      //   .plugin('webpack-bundle-analyzer')
      //   .use(BundleAnalyzerPlugin)
    }
  },
  css: {
    loaderOptions: {
      sass: { // 全局scss注入
        prependData: `
          @import "@/styles/global.scss";
          @import "@/styles/mixin.scss";
          @import "@/styles/common.scss";
        `
      }
    }
  },
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      chunks: ['chunk-vendors', 'chunk-common', 'index'],
      cdn: {
        css: [
          'https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css'
        ],
        js: [
          'https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js',
          'https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.8/vue-router.min.js',
          'https://cdn.bootcdn.net/ajax/libs/vuex/3.5.1/vuex.min.js',
          'https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js', // axios请求库
          'https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js', // vant
          'https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js', // vant
          'http://cdn.staticfile.org/moment.js/2.24.0/moment.min.js', // moment时间转化
          'https://aha-school-management-1301319986.cos.ap-shanghai.myqcloud.com/system/moment-zhcn.js', // moment中文化
          'https://unpkg.com/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js', // cos
          'https://aha-public-1257019972.cos.ap-shanghai.myqcloud.com/system_static/readFileSDK.js', // cos读取文件sdk
        ],
      }
    }
  }
}
